<template>
    <div class="programdetails">
        <div class="headback">
            <div class="proHead">
                <div style="height: 50px;width: 100%;"></div>
                <div class="prog-header">
                    <div class="left">
                        <p class="sbcaozuo" @click="$router.back()">《</p>
                    </div>
                    <div class="center">四姑娘山两日游自由行(美景＋美食)</div>
                    <div class="prog-star">
                        <i class="prog-icon">&#xe601;</i>
                    </div>
                </div>
            </div>
        </div>
        <div class="browse-trip">
            <div class="overview-stroke">行程概览</div>
            <div class="overview-strokeContent">
                <div class="list">
                    <div class="listLeft">景点</div>
                    <div class="listRight" style="color: #e8a41c">共1个景点</div>
                </div>
                <div class="list">
                    <div class="listLeft">饮食</div>
                    <div class="listRight">共4次用餐 | 推荐用餐</div>
                </div>
                <div class="list">
                    <div class="listLeft">住宿</div>
                    <div class="listRight">1晚当地酒店</div>
                </div>
            </div>
        </div>
        <div class="trip-planning">
            <div class="overview-stroke">行程规划</div>
            <div class="days" v-for="(day,index) in paths.pathDetailList" :key="index">
                <div class="daysHead">
                    <div class="daysHead-day" v-if="index==0">第一天</div>
                    <div class="daysHead-day" v-else-if="index==1">第二天</div>
                    <div class="daysHead-day" v-else-if="index==2">第三天</div>
                    <div class="daysHead-day" v-else-if="index==4">第四天</div>
                    <div class="daysHead-location">
                        <span>成都</span>
                        <i class="prog-icon">&#xe63e;</i>
                        <span>小金县</span>
                    </div>
                </div>
                <div class="daysDetail">
                    <div v-for="p in day" :key="p.id">
                        <!--行-->
                        <div class="daysDetail-times" v-if="p.type =='行'">
                            <div class="timesHead">
                                {{p.timeStart}}~{{p.timeEnd}} 从{{p.addressStart}}出发，前往{{p.addressEnd}}
                            </div>
                            <div class="timesText">
                                <div class="timesTextImg">
                                    <img src="../../../assets/toSGN1.png" alt="">
                                    <img src="../../../assets/toSGN2.png" alt="">
                                    <img src="../../../assets/toSGN3.png" alt="">
                                </div>
                                <div class="timesTextIntroduction">
                                    <!--                                <p>10:00 德阳北站乘动车前往成都东站，再乘地铁前往茶店子客运站(预计花费￥32，时间约70分钟)</p>-->
                                    <!--                                <p>13:00 茶店子客运站乘坐汽车前往小金县，再拼车前往四姑娘山镇(预计花费￥105，时间约5~6小时)</p>-->
                                    <p v-text="p.description"/>
                                </div>
                            </div>
                        </div>
                        <!--吃-->
                        <div class="daysDetail-times" v-if="p.type =='吃'">
                            <div class="timesHead">
                                {{p.timeStart}}~{{p.timeEnd}} 吃饭，附近餐馆：
                            </div>
                            <div class="timesText">
                                <div class="timesTextIntroduction lunch">
                                    <div class="top" v-for="foodOrHotel in p.foodOrHotel.pois" :key="foodOrHotel.id">
                                        <img :src="foodOrHotel.photos[0].url" alt="暂无图片">
                                        <div class="right">
                                            <h3>{{foodOrHotel.name}}</h3>
                                            <van-rate :value="parseFloat(foodOrHotel.biz_ext.rating)" allow-half
                                                      :count="5"></van-rate>
                                            <span>{{typeof foodOrHotel.biz_ext.rating != "object"   ? parseFloat(foodOrHotel.biz_ext.rating ):foodOrHotel.biz_ext.rating =0}}分</span>
                                            <p>距查询地点 {{foodOrHotel.distance/1000}}km</p>
                                            <p>￥暂无详情</p>
                                            <!--                                            <p>{{foodOrHotel.tag}}</p>-->
                                        </div>
                                    </div>
                                    <!--                                    <div class="top">-->
                                    <!--                                        <img src="../../../assets/toSGN15.png" alt="">-->
                                    <!--                                        <div class="right">-->
                                    <!--                                            <h3>柴门饭儿(远洋太古里店)</h3>-->
                                    <!--                                            <van-rate v-model="starNum" allow-half :count="5"></van-rate>-->
                                    <!--                                            <span>{{starNum}}分</span>-->
                                    <!--                                            <p>距市中心 3.0km</p>-->
                                    <!--                                            <p>人均￥90起</p>-->
                                    <!--                                        </div>-->
                                    <!--                                    </div>-->
                                </div>
                            </div>
                        </div>
                        <!--住-->
                        <div class="daysDetail-times" v-if="p.type=='住'">
                            <div class="timesHead">
                                {{p.timeStart}}~ {{p.timeEnd}} 住，附近酒店：
                            </div>
                            <div class="timesText">
                                <div class="timesTextIntroduction lunch">
                                    <div class="top" v-for="foodOrHotel in p.foodOrHotel.pois" :key="foodOrHotel.id">
                                        <img :src="foodOrHotel.photos[0].url" alt="">
                                        <div class="right">
                                            <h3>{{foodOrHotel.name}}</h3>
                                            <van-rate :value="parseFloat(foodOrHotel.biz_ext.rating)" allow-half
                                                      :count="5"></van-rate>
                                            <span>{{typeof foodOrHotel.biz_ext.rating != "object"   ? parseFloat( foodOrHotel.biz_ext.rating):foodOrHotel.biz_ext.rating = 0}}分</span>
                                            <p>距查询点 {{foodOrHotel.distance/1000}}km</p>
                                            <div class="typesOfMoney">
                                                <p>经济型</p>
                                                <p>&yen;{{ typeof foodOrHotel.biz_ext.lowest_price =="object"
                                                    ?"暂无详情":foodOrHotel.biz_ext.lowest_price + "起"}}</p>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!--玩-->
                        <div class="daysDetail-times" v-if="p.type=='玩'">
                            <div class="timesHead">
                                {{p.timeStart}}~{{p.timeEnd}} 游玩
                            </div>
                            <div class="timesText">
                                <div class="timesTextImg">
                                    <img src="../../../assets/toSGN110.png" alt="">
                                    <img src="../../../assets/toSGN111.png" alt="">
                                    <img src="../../../assets/toSGN112.png" alt="">
                                </div>
                                <div class="timesTextIntroduction">
                                    <p v-text="p.description">
                                        <!--                                        早餐后约8:00到达四姑娘山游览双桥沟（门票￥120/人，观光车￥70/人）然后进入景区，观阴阳谷、五色山、日月宝镜、人参果坪、沙棘林栈道、撵鱼坝、猎人峰、牛棚子、牛心山、阿妣山、野人峰等，-->
                                        <!--                                        双桥沟景区内开阔平坦、景点集中，全程通车。沟内以山景为主，沿沟216平方公里范围内，次第分布着几十座海拔在5000米上的山峰，会同山涧溪流，如同徐徐展开的山水画廊。沟内还分布着目前国内罕见的千年原始沙棘树林，以及平坦宽阔的高山草甸，漫步其中，宛若置身仙境。沟内现已开通绿色环保的观光车，游客可以更加舒适、方便的游览整个景区。备注:双桥沟全程34公里,乘观光车游玩,一般游玩时间为4小时左右;景区内,每个景点都有一个观光车上下的车站,请在车站坐车,保管好自己的贵重物品及随身物品;-->
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
<!--                    <p>-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; 多条完美的分割线-->
<!--                        -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;</p>-->


                </div>
            </div>

        </div>
        <button class="useProgram">使用此方案</button>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                starNum: 4.0,
                starNum2: 5.0,
                starNum3: 5.0,
                starNum4: 4.5,
                starNum5: 3.5,
                paths: null
            }
        },
        methods: {
            goTo(path) {
                this.$router.replace(path)
            },
            async queryNearby(p, location, types) {
                if (!location) return;
                location = location.replace("[", "");
                location = location.replace("]", "");
                await this.axios.get("https://restapi.amap.com/v3/place/around", {
                    params: {
                        key: "790804edf8782a88ac50e0c12601bd70",
                        location: location,
                        types: types.search("食") != -1 ? "050000" : types.search("住") != -1 ? "100000" : "110000", /*默认景点*/
                        radius: "3000",
                        offset: "10",
                        extensions: "all"
                    }
                }).then(function (result) {

                    result.data.pois.forEach(poi => {
                        if (poi.photos.length != 0) {
                            p.foodOrHotel.pois.push(poi);
                        }

                    })
                    return result.data;
                }).catch(function (resul) {
                    console.log(resul)

                })
            }
        },
        created() {
            let days = [];
            for (let i = 1;
                 i < this.$route.query.path.daysCount + 1;
                 i++
            ) {
                days.push(this.$route.query.pathDetailList.filter(p => {
                    return p.dayNumber == i;
                }))
            }


            //对时间进行排序
            days.forEach(p => {
                p.sort(function (p1, p2) {
                    let a = parseInt(p1.timeStart.replace(":", ""));
                    let b = parseInt(p2.timeStart.replace(":", ""));
                    return a - b;
                });
            });
            //对第几天进行排序
            days.sort((d1, d2) => {
                return d1[0].dayNumber - d2[0].dayNumber;
            });
            //设置食住
            days.forEach(days => {
                days.forEach(p => {
                    p.foodOrHotel = {
                        pois: []
                    }
                    if (p.type == "吃") {
                        this.queryNearby(p, p.location, "食");
                        console.log("设置食:" + p)

                    }
                    if (p.type == "住") {
                        this.queryNearby(p, p.location, "住");
                        console.log("设置住:" + p)
                    }
                })
            })
            this.$route.query.pathDetailList = days;
            this.paths = this.$route.query;
        }
    }
</script>


<style>
    .sbcaozuo {
        margin-left: 20px;
        font-size: 36px;
    }

    .prog-icon {
        font-family: iconfont;
        font-style: normal;
    }

    .van-rate__icon {
        color: #e8a41c !important;
    }

    .programdetails {
        position: relative;
    }

    .headback {
        width: 100%;
        height: 350px;
        background: url("../../../assets/per-siguniang.png");
        background-size: 100% 100%;
    }

    .proHead {
    }

    .prog-header {
        width: 100%;
        height: 96px;
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;
        color: white;
    }

    .prog-header > .left {
        width: 20%;
        height: 80px;

    }

    .prog-header > .center {
        width: 60%;
        font-size: 30px;
        text-align: center;
        line-height: 80px;
        color: white;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .prog-header > .left {
        display: flex;
        align-items: center;
    }

    .prog-header > .left > i {
        margin-left: 16px;
        display: none;
    }

    .prog-star {
        display: flex;
        color: white;
        font-size: 48px;
    }

    .browse-trip {
        width: 100%;
        height: 195px;
    }

    .overview-stroke {
        padding-left: 15px;
        margin-bottom: 23px;
        font-size: 30px;
    }

    .overview-strokeContent {
        width: 650px;
        height: 125px;
        margin: 0 auto;
    }

    .overview-strokeContent > .list {
        display: flex;
        font-size: 26px;
    }

    .overview-strokeContent > .list > .listLeft {
        margin-right: 32px;
    }

    .trip-planning {
        height: auto;
    }

    .days {
        width: 670px;
        height: auto;
        margin: 0 auto;
        margin-bottom: 40px;
    }

    .daysHead {
        width: 100%;
        height: 126px;
        text-align: center;
    }

    .daysHead-day {
        width: 130px;
        height: 50px;
        background: #e8a41c;
        margin: 0 auto;
        border-radius: 10px;
        color: white;
        line-height: 50px;
        font-size: 30px;
        margin-bottom: 20px;
    }

    .daysHead-location {
        font-size: 26px;
    }

    .daysHead-location > i {
        margin: 0px 20px;
    }

    .daysDetail {
        width: 100%;
        height: auto;
    }

    .daysDetail-times {
        width: 626px;
        height: auto;
        margin: 0 auto;
        margin-bottom: 30px;
    }

    .timesHead {
        font-size: 28px;
        position: relative;
    }

    .timesHead:before {
        content: "";
        position: absolute;
        width: 22px;
        height: 22px;
        background: #e8a41c;
        border-radius: 50%;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
    }

    .timesText {
        width: 100%;
        height: auto;
        background: #eeeeee;
        padding: 20px;
    }

    .timesTextImg {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .timesTextImg > img {
        width: 180px;
        height: 140px;
    }

    .timesTextIntroduction > p {
        text-indent: 25px;
    }

    .timesTextIntroduction > p:first-of-type {
        margin-bottom: 14px;
    }

    .lunch > div {
        display: flex;
        justify-content: space-between;
    }

    .lunch > .top {
        margin-bottom: 20px;
    }

    .lunch > div > img {
        width: 220px;
        height: 140px;
    }

    .lunch > div > .right {
        width: 60%;
    }

    .lunch > div > .right > p {
        font-size: 24px;
        color: #666;
    }

    .typesOfMoney {
        display: flex;
        justify-content: space-between;
    }

    .typesOfMoney > p:last-of-type {
        color: #ff4646;
        font-size: 26px;
    }

    .lastGoBack > p:first-of-type {
        margin-bottom: 20px;
    }

    .useProgram {
        width: 100%;
        height: 96px;
        background: #e8a41c;
        color: white;
        margin-bottom: 40px;
        border: none;
        font-size: 28px;
        letter-spacing: 10px;
    }
</style>
